<!--
 * @Author: zhoupei
 * @LastEditTime: 2023-07-06 15:20:21
 * @FilePath: \chagpt-shuowen\src\views\chat\draw.vue
 * @Description: chat页面draw.vue
-->
<template>
  <div class="body">
    <el-row class="title">
      <el-col :span="1">
        <img style="height: 70%; width: 70%; margin-left: 51px; margin-top: 10px" src="/src/assets/panda.png" />
      </el-col>
      <el-col :span="19" style="height: 30%; margin: 22px; font-size: 20px">熊猫助手</el-col>
      <el-col :span="1" style="
          height: 30%;
          margin-left: 110px;
          margin-top: 25px;
          font-size: 15px;
        ">
        <el-button type="warning" round><el-icon color="rgb(235, 141, 18)">
            <ShoppingCart />
          </el-icon>购买</el-button></el-col>
      <el-col :span="1" style="height: 30%; margin-left: 0px; margin-top: 25px; font-size: 15px">
        <el-button type="primary" round @click="loginClick">
          <el-icon color="rgb(87, 140, 236)">
            <UserFilled />
          </el-icon>登录
        </el-button>
      </el-col>
    </el-row>
    <el-tabs model-value="1" tab-position="right" style="height: 92%; background-color: black; border: none"
      class="demo-tabs" type="border-card" @tab-click="tabClick">
      <el-tab-pane label="聊天">
        <div style="
            background-color: white;
            width: 110%;
            height: 900px;
            padding-right: 230px;
            padding-bottom: 60px;
            margin-top: -25px;
          ">
          <Chat />
        </div>
      </el-tab-pane>
      <el-tab-pane label="绘画">
        <div>
          <!-- <div>
            <el-row style="margin-top: 20px; margin-left: -25px">
              <el-col :span="1" style="border: none">
                <div class="icon-container">
                  <img src="/src/assets/panda.png" class="icon" @click="aiShow = true" />
                </div>
              </el-col>
              <el-col :span="3">
                <el-alert style="
                background-color: rgb(252, 185, 1);
                color: black;
                margin: -10px 8px;
              " title="我是熊猫助手AI机器人,有什么我可以帮您的吗?" type="info" show-icon :closable="false" />
              </el-col>
            </el-row>
            <el-row style="padding-left: 450px; padding-right: 450px">
              <el-col :span="24">
                <div style="position: relative">
                  <el-input v-model="form.message" type="text"
                    input-style="background-color: rgb(70, 72, 73); height: 100px; color: white;font-size:30px;"
                    placeholder="请用文字描述你想要生成的内容" />
                  <el-button type="primary" round style="
                  position: absolute;
                  top: 20px;
                  right: 0;
                  background-color: rgb(105, 92, 221);
                  margin-right: 30px;
                  width: 15%;
                  height: 60%;
                  border: 2px solid black;
                  font-weight: bold;
                  font-size: 18px;
                  color: rgb(114, 198, 247);
                ">生成图片</el-button>
                </div>
              </el-col>
            </el-row>
            <el-drawer v-model="aiShow" direction="rtl">
              <template #header>
                <h3>熊猫助手</h3>
              </template>
              <template #default>
                <div>熊猫助手AI机器人功能,未完待续。</div>
              </template>
            </el-drawer>
          </div> -->
          <div style="margin-top:-25px; width: 101%; height:900px;padding:20px; background-color: white">
            <el-form :model="form" label-width="120px" label-position="top" style="color: white;height:100%;">
              <el-row>
                <el-col :span="23">
                  <h2 style="color: rgb(194, 117, 16); font-size: 18px; font-weight: bold">AI绘画</h2>
                </el-col>
              </el-row>
              <el-row>
                <!-- <el-col :span="6">
                  <el-form-item label="图片比例">
                    <div v-for="item in form.imageScaleList" :key="item.id" style="margin-left: 10px;">
                      <div :class="{ 'outer-rectangle': true, 'outer-rectangle-click': item.selected }"
                        @click="imageSclaeClick(item.id)">
                        <div :class="{ 'inner-rectangle': true, 'inner-rectangle-click': item.selected }"></div>
                        <h3 style="padding:60px 28px;" :class="{ 'inner-text': true, 'inner-text-click': item.selected }">
                          {{ item.value }}
                        </h3>
                      </div>
                    </div>

                  </el-form-item>
                  <el-form-item label="模型选择">
                    <el-select v-model="form.model">
                      <el-option label="MJ: 通用模型" value="MJ" />
                      <el-option label="NIJI: 动漫风格模型" value="NIJI" />
                      <el-option label="NIJT: 古代风格模型" value="NIJT" />
                      <el-option label="NIJS: 现代风格模型" value="NIJS" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="画质">
                    <el-select v-model="form.pictureQuality">
                      <el-option label="一般" value="1K" />
                      <el-option label="清晰" value="2K" />
                      <el-option label="高清" value="3K" />
                      <el-option label="超高清" value="4K" />
                      <el-option label="8K" value="8K" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="风格">
                    <div>
                      <el-image style="width: 120px; height: 120px;padding: 3px;" :src="draw7" fit="fill" />
                      <el-image style="width: 120px; height: 120px;padding: 3px;" :src="draw7" fit="fill" />
                      <el-image style="width: 120px; height: 120px;padding: 3px;" :src="draw7" fit="fill" />
                      <el-button style="margin-top: -90px;" type="primary" link>全部模版</el-button>
                    </div>
                  </el-form-item>
                  <el-form-item label="风格化">
                    <div>
                      <el-row>
                        <el-col :span="4">
                          <el-button round type="warning" style="color: black; width: 90%;"
                            @click="styliZeClick(50)">低</el-button>
                        </el-col>
                        <el-col :span="4">
                          <el-button round type="warning" style="color: black;width: 90%;"
                            @click="styliZeClick(100)">中</el-button>
                        </el-col>
                        <el-col :span="4">
                          <el-button round type="warning" style="color: black;width: 90%;"
                            @click="styliZeClick(250)">高</el-button>
                        </el-col>
                        <el-col :span="4">
                          <el-button round type="warning" style="color: black;width: 90%;"
                            @click="styliZeClick(750)">强烈</el-button>
                        </el-col>
                      </el-row>

                      <el-input style="margin-top: 10px;" type="number" max="1000" min="1" v-model="form.styliZe"
                        placeholder="Please input" />
                      <el-alert type="info" show-icon :closable="false">
                        <p>参数释义：范围 1-1000,数值越高，画面表现也会更具丰富性和艺术性</p>
                      </el-alert>
                    </div>
                  </el-form-item>
                  <el-form-item label="混乱">
                    <el-input type="number" max="100" min="0" v-model="form.confusion" placeholder="Please input" />
                    <el-alert type="info" show-icon :closable="false">
                      <p>参数释义：较高值将产生意想不到的结果和成分较低值具有更可靠、可重复的结果</p>
                    </el-alert>
                  </el-form-item>
                  <el-form-item label="携带参数">
                        <el-switch v-model="form.ifParameters" />
                      </el-form-item>
                </el-col> -->
                <el-col :span="24">
                  <el-form :inline="true" size="large" class="demo-form-inline" label-position="top">
                    <el-form-item label="Stable Diffusion 模型 (CHECKPOINT)">
                      <el-select v-model="form.model" style="width: 300px;">
                        <el-option v-for="item in form.modelList" :key="item.title" :label="item.title"
                          :value="item.title" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="推荐词(关键字)">
                      <div style="border:1px solid rgb(189, 186, 186);width: 500px">
                        <el-tag v-for="tag in form.recommendWordsList" :key="tag" class="mx-1" closable
                          :disable-transitions="false" @close="handleRecommendWordsClose(tag)">
                          {{ tag }}
                        </el-tag>
                        <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-1 w-20" size="small"
                          @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
                        <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                          + 追加
                        </el-button>
                      </div>
                      <div>
                        &nbsp;
                        <el-check-tag v-for="it in systemRecommendList" :key="it.label" :checked="it.select"
                          :color="'black'" :hit="true" style="margin-right: 8px"
                          @click="systemRecommendClick(it.label)">{{ it.label }}</el-check-tag>
                      </div>
                    </el-form-item>
                  </el-form>
                  <el-tabs v-model="activeName" class="demo-tabs" style="height:20%">
                    <el-tab-pane label="文生图" name="textNewImage">
                      <el-row>
                        <el-col :span="18">
                          <el-input maxlength="500" show-word-limit v-model="form.message" type="textarea"
                            input-style="background-color: rgb(70, 72, 73); height: 100px; color: white;font-size:20px;"
                            placeholder="请用文字描述你想要生成的内容" />
                        </el-col>
                        <el-col :span="6">
                          <el-button type="primary" round style="
                  position: absolute;
                  top: 2px;
                  right: 0;
                  background-color: rgb(105, 92, 221);
                  margin-right: 230px;
                  width: 10%;
                  height: 90%;
                  border: 2px solid black;
                  font-weight: bold;
                  font-size: 18px;
                  color: rgb(114, 198, 247);
                " @click="textToimgClick" :loading="text2imgLoading">生成图片</el-button>
                          <el-button type="primary" round style="
                  position: absolute;
                  top: 2px;
                  right: 0;
                  background-color: rgba(248, 169, 21, 0.897);
                  margin-right: 30px;
                  width: 10%;
                  height: 40%;
                  border: 2px solid black;
                  font-weight: bold;
                  font-size: 18px;
                  color: rgb(81, 82, 83);
                " @click="resetClick">重置参数</el-button>
                          <el-button type="primary" round style="
                  position: absolute;
                  top: 50px;
                  right: 0;
                  background-color: rgba(248, 169, 21, 0.897);
                  margin-right: 30px;
                  width: 10%;
                  height: 40%;
                  border: 2px solid black;
                  font-weight: bold;
                  font-size: 18px;
                  color: rgb(81, 82, 83);
                " @click="settingClick">高级设置</el-button>
                        </el-col>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="图生图" name="imageNewImage">
                      <el-row>
                        <el-col :span="18">
                          <el-input maxlength="500" show-word-limit v-model="form.message" type="textarea"
                            input-style="background-color: rgb(70, 72, 73); height: 100px; color: white;font-size:20px;"
                            placeholder="请上传图片,该功能还未开发,请您耐心等待" />
                        </el-col>
                        <el-col :span="6">
                          <el-button type="primary" round style="
                  position: absolute;
                  top: 2px;
                  right: 0;
                  background-color: rgb(105, 92, 221);
                  margin-right: 230px;
                  width: 10%;
                  height: 90%;
                  border: 2px solid black;
                  font-weight: bold;
                  font-size: 18px;
                  color: rgb(114, 198, 247);
                " :loading="text2imgLoading">生成图片</el-button>
                          <el-button type="primary" round style="
                  position: absolute;
                  top: 2px;
                  right: 0;
                  background-color: rgba(248, 169, 21, 0.897);
                  margin-right: 30px;
                  width: 10%;
                  height: 40%;
                  border: 2px solid black;
                  font-weight: bold;
                  font-size: 18px;
                  color: rgb(81, 82, 83);
                " @click="resetClick">重置参数</el-button>
                          <el-button type="primary" round style="
                  position: absolute;
                  top: 50px;
                  right: 0;
                  background-color: rgba(248, 169, 21, 0.897);
                  margin-right: 30px;
                  width: 10%;
                  height: 40%;
                  border: 2px solid black;
                  font-weight: bold;
                  font-size: 18px;
                  color: rgb(81, 82, 83);
                " @click="settingClick">高级设置</el-button>
                        </el-col>
                      </el-row>
                    </el-tab-pane>
                  </el-tabs>
                  <div style="height:100%;">
                    <h3 style="color: black; font-size: 18px; font-weight: bold; margin-top: 30px;">我的图片</h3>
                    <Gallery :height="'500px'" :width="'1780px'" :data="myDrawList" :image-height="'492px'"
                      :image-width="'437px'" />
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="画廊">
        <div style="margin-top: -25px;">
          <Gallery :height="'910px'" :width="'1836px'" :data="drawList" :image-height="'492px'" :image-width="'437px'" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="写作">写作</el-tab-pane>
      <el-tab-pane label="思维导图">思维导图</el-tab-pane>
      <el-tab-pane label="签到奖励">签到奖励</el-tab-pane>
      <el-tab-pane label="跟随系统">跟随系统</el-tab-pane>
      <el-tab-pane label="消息">消息</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, nextTick } from "vue";
import { Chat } from "./components";
import { Gallery } from "./components";
import { getDrawModels, text2img, getDrawList } from '@/api/draw'
import { Response } from '@/utils/request';
import { DrawModel, Draw, SystemRecommend } from '@/typings/chat';
import type { TabsPaneContext } from 'element-plus';
import { ElMessage } from 'element-plus';
import { ElInput } from 'element-plus'
import { useRouter } from 'vue-router';
import { getFingerprint } from '@/utils/browser';

// 路由
const router = useRouter();
// 绘画展示
let drawList: Draw[] = reactive([]);
// 生成后的图片
let myDrawList: Draw[] = reactive([]);
// 打开AI
let aiShow = ref(false);
// 提交加载状态
let text2imgLoading = ref(false);
// 绘图信息
let form = reactive({
  message: "",
  model: "",
  recommendWordsList: [] as string[],
  pictureQuality: "1K",
  confusion: 0,
  styliZe: 50,
  ifParameters: true,
  imageScaleList: [
    {
      id: 1,
      value: '1:1',
      selected: true
    },
    {
      id: 2,
      value: '4:3',
      selected: false
    },
    {
      id: 3,
      value: '3:4',
      selected: false
    },
    {
      id: 4,
      value: '16:9',
      selected: false
    },
    {
      id: 5,
      value: '9:16',
      selected: false
    }
  ],
  modelList: [] as DrawModel[]
});
// 默认选择文字生成图片
const activeName = ref('textNewImage');
// 推荐词
const inputValue = ref('');
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();
const systemRecommendList: SystemRecommend[] = reactive([{ label: '白色', select: false }, { label: '可爱', select: false }, { label: '国风', select: false }]);
// 提交文生图
const textToimgClick = async () => {
  text2imgLoading.value = true;
  let res = await text2img({ prompt: form.message, model: form.model });
  if (res.code == 200) {
    console.log(res.data)
    res.data.forEach((it: string) => {
      myDrawList.push({ src: it, select: false });
      ElMessage({
        message: '生成成功',
        type: 'success',
      })
    })
  }
  text2imgLoading.value = false;
};
onMounted(async () => {
  //获取指纹
  getFingerprint();
  // 获取模型
  let res = await getDrawModels();
  form.modelList = res.data;
  if (form.modelList.length > 0) {
    form.model = form.modelList[0].title;
  }
  //获取画廊列表
  getDrawLists();
});
const tabClick = (tab: TabsPaneContext, event: Event) => {
  if ('画廊' == tab.props.label) {
    //获取画廊列表
    getDrawLists();
  }
};
// 重置输入信息
const resetClick = () => {
  form.message = '';
};
// 打开高级设置
const settingClick = () => {
  alert("该功能还在开发中...");
};
// 获取画廊列表
const getDrawLists = async () => {
  // 每次清空
  drawList.splice(0, drawList.length);
  let response = await getDrawList();
  console.log(response);
  response.data.forEach((it: { url: string }) => {
    drawList.push({ src: it.url, select: false });
  })
};
// 删除推荐词
const handleRecommendWordsClose = (tag: string) => {
  form.recommendWordsList.splice(form.recommendWordsList.indexOf(tag), 1);
  systemRecommendList.forEach(it => {
    if (it.label == tag) {
      it.select = false;
    }
  })
};

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
};
// 追加推荐词
const handleInputConfirm = () => {
  if (inputValue.value && form.recommendWordsList.indexOf(inputValue.value) == -1) {
    form.recommendWordsList.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
};
// 点击推荐词
const systemRecommendClick = (label: string) => {
  if (form.recommendWordsList.indexOf(label) == -1) {
    form.recommendWordsList.push(label);
    systemRecommendList.forEach(it => {
      if (it.label == label) {
        it.select = true;
      }
    })
  }
};
// 登录
const loginClick = () => {
  router.push('/login')
};
// 图片比列点击
const imageSclaeClick = (id: number) => {
  form.imageScaleList.forEach(it => {
    if (id == it.id) {
      it.selected = true;
    } else {
      it.selected = false;
    }
  })
}
const styliZeClick = (num: number) => {
  form.styliZe = num;
}
</script>

<style scoped>
.body {
  width: 100%;
  height: 100%;
  background-color: black;
}

.title {
  color: white;
  height: 8%;
  background-color: rgb(20, 20, 20);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.icon-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  /* 设置透明度 */
}

.icon:hover {
  opacity: 1;
  /* 鼠标悬浮时显示完整不透明的图标 */
}

.el-alert {
  margin: 20px 0 0;
}

.el-alert:first-child {
  margin: 0;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.outer-rectangle {
  width: 80px;
  height: 100px;
  border: 2px solid #ccc;
  position: relative;
}

.inner-rectangle {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inner-text {
  color: black;
}

.outer-rectangle-click {
  width: 80px;
  height: 100px;
  border: 3px solid #f1ab137e;
  position: relative;
}

.inner-rectangle-click {
  width: 40px;
  height: 40px;
  border: 3px solid #f1ab137e;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inner-text-click {
  color: #c32ff07e;
  font-weight: bold;
}
</style>